import 'package:flutter/material.dart';

final ThemeData lightModeData = ThemeData(
  // brightness: Brightness.light,
  scaffoldBackgroundColor: Color.fromRGBO(235, 237, 242, 1),
  // cardColor: Colors.white,
  // Navigation bar theme
  navigationBarTheme: NavigationBarThemeData(
    backgroundColor: Colors.white,
    indicatorColor: Colors.transparent,
    elevation: 4,
    labelTextStyle: WidgetStateProperty.resolveWith<TextStyle>((states) {
      return TextStyle(
          fontFamily: 'Poppins',
          fontWeight: states.contains(WidgetState.selected)
              ? FontWeight.w500
              : FontWeight.w400,
          fontSize: 10,
          letterSpacing: 0,
          color: states.contains(WidgetState.selected)
              ? Colors.black
              : Colors.black.withAlpha(128));
    }),
  ),
);
final ThemeData darkModeData = ThemeData(
  // brightness: Brightness.dark,
  scaffoldBackgroundColor: Colors.black,
  // cardColor: Color.fromRGBO(34, 34, 34, 1),
  // Navigation bar theme
  navigationBarTheme: NavigationBarThemeData(
    backgroundColor: Colors.black,
    indicatorColor: Colors.transparent,
    // For icon colors
    iconTheme: WidgetStateProperty.resolveWith<IconThemeData>((states) {
      return IconThemeData(
          color: states.contains(WidgetState.selected)
              ? Colors.white
              : Colors.white.withAlpha(128));
    }),

    labelTextStyle: WidgetStateProperty.resolveWith<TextStyle>((states) {
      return TextStyle(
          color: states.contains(WidgetState.selected)
              ? Colors.white
              : Colors.white.withAlpha(128));
    }),
  ),
);

// ------------------------------------------------------------------------------------- //
// ------------------------------------------------------------------------------------- //
// ------------------------------------------------------------------------------------- //
// ------------------------------------------------------------------------------------- //
// ------------------------------------------------------------------------------------- //

/// * 在许多设计系统（如 Material Design）中，颜色的角色通常遵循以下模式：

/// * primary → 主要容器/组件的背景色（如按钮、导航栏）

/// * onPrimary → 在 primary 背景上显示的内容（文本、图标等）的颜色

/// * secondary → 次要容器/组件的背景色

/// * onSecondary → 在 secondary 背景上的文本颜色

/// * surface → 一般界面背景（如卡片、页面背景）

/// * onSurface → 在 surface 上的文本颜色
///
/// * M3 预设的 7 种圆角大小（单位：dp）
/// * https://m3.material.io/styles/shape/shape-scale-tokens
/// *
/// * none → 完全直角（0dp），适用于需要严肃、高效或技术感的组件： 数据表格、全屏标签等需要严格对齐的场景
/// * extraSmall → 轻微圆角（4dp），用于低层级的辅助元素或小型组件： 标签、输入框等小型组件
/// * small → 基础圆角（8dp），平衡柔和与结构感，常用于中等优先级组件：标准按钮、卡片和对话框
/// * medium → 中等圆角（12dp），用于需要视觉聚焦的中高层级组件：如扩展按钮、导航抽屉
/// * large → 大圆角（16dp），强调柔和与亲和力，适合大型或重要组件：大型卡片或提示栏
/// * extraLarge → 超大圆角（28dp），极强的圆角，用于创造视觉焦点或特殊形态：FAB 或特殊形状的横幅,特殊形状的容器（如胶囊形搜索栏）
/// * full → 全圆角（999dp），用于高度强调或标识性元素：圆形按钮、头像等标识性元素
/// *
/// * Usage:
/// * M3Shape.mediumRadius, // 直接使用 M3 的 'Medium' 圆角
///
class M3Shape {
  static const double none = 0;
  static const double extraSmall = 4.0;
  static const double small = 8.0;
  static const double medium = 12.0;
  static const double large = 16.0;
  static const double extraLarge = 28.0;
  static const double full = 999.0; // 全圆角

  // 快速生成 BorderRadius
  static BorderRadius radius(double radius) => BorderRadius.circular(radius);
  static BorderRadius get noneRadius => radius(none);
  static BorderRadius get extraSmallRadius => radius(extraSmall);
  static BorderRadius get smallRadius => radius(small);
  static BorderRadius get mediumRadius => radius(medium);
  static BorderRadius get largeRadius => radius(large);
  static BorderRadius get extraLargeRadius => radius(extraLarge);
  static BorderRadius get fullRadius => radius(full);
}

const double _defaultFontSize = 16.0;
final ThemeData loginInBlueThemeData = ThemeData(
    // this is for cursorColor
    textSelectionTheme: TextSelectionThemeData(cursorColor: Colors.blueAccent),
    checkboxTheme: CheckboxThemeData(
      checkColor: WidgetStatePropertyAll<Color>(Colors.white),
      side: const BorderSide(color: Colors.blue, width: 2),
      fillColor: WidgetStateProperty.resolveWith<Color>((states) {
        if (states.contains(WidgetState.selected)) {
          return Colors.blue;
        }
        return Colors.transparent;
      }),
    ),
    textButtonTheme: TextButtonThemeData(
        style: ButtonStyle(
            foregroundColor: WidgetStateProperty.resolveWith<Color?>(
                (Set<WidgetState> states) {
              if (states.contains(WidgetState.focused) ||
                  states.contains(WidgetState.pressed) ||
                  states.contains(WidgetState.hovered)) return Colors.white;
              return Colors.white30;
            }),
            textStyle: WidgetStateProperty.all(const TextStyle(
                color: Colors.black, fontSize: _defaultFontSize)))),
    inputDecorationTheme: InputDecorationTheme(
      filled: true,
      contentPadding: EdgeInsets.symmetric(vertical: 12, horizontal: 16),
      fillColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
        if (states.contains(WidgetState.focused)) {
          return Colors.white;
        }
        return Colors.white.withAlpha(150);
      }),
      hintStyle: TextStyle(
        color: Colors.grey[600],
        fontSize: _defaultFontSize,
      ),
      border: WidgetStateInputBorder.resolveWith((Set<WidgetState> states) {
        if (states.contains(WidgetState.focused)) {
          return const OutlineInputBorder(
              borderSide: BorderSide(width: 2, color: Colors.blueAccent),
              borderRadius: BorderRadius.all(Radius.circular(8)));
        } else if (states.contains(WidgetState.hovered)) {
          return const OutlineInputBorder(
              borderSide: BorderSide(width: 1.5, color: Colors.blueAccent),
              borderRadius: BorderRadius.all(Radius.circular(8)));
        }
        return const OutlineInputBorder(
            borderSide: BorderSide.none,
            borderRadius: BorderRadius.all(Radius.circular(8)));
      }),
      errorBorder: OutlineInputBorder(
        borderSide: BorderSide(color: Colors.red, width: 1.5),
        borderRadius: BorderRadius.circular(8),
      ),
      prefixIconColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
        if (states.contains(WidgetState.focused) ||
            states.contains(WidgetState.pressed) ||
            states.contains(WidgetState.hovered)) {
          return Colors.blueAccent;
        }
        return Colors.grey[600]!;
      }),
      suffixIconColor: WidgetStateColor.resolveWith((Set<WidgetState> states) {
        if (states.contains(WidgetState.focused) ||
            states.contains(WidgetState.pressed) ||
            states.contains(WidgetState.hovered)) {
          return Colors.blueAccent;
        }
        return Colors.grey[600]!;
      }),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
        style: ButtonStyle(
            padding: WidgetStateProperty.all(
                const EdgeInsets.symmetric(horizontal: 50, vertical: 20)),
            textStyle: WidgetStateProperty.all(
                const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            shape: WidgetStateProperty.all(RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(50.0))),
            foregroundColor: WidgetStateProperty.all(Colors.white),
            backgroundColor: WidgetStateColor.resolveWith(
              (Set<WidgetState> states) {
                if (states.contains(WidgetState.focused) ||
                    states.contains(WidgetState.pressed) ||
                    states.contains(WidgetState.hovered)) {
                  return Colors.blue.shade800;
                }
                return Colors.lightBlue[900]!;
              },
            ),
            elevation: WidgetStateProperty.all(8.0))));
